import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { observable, action } from 'mobx'

@inject("homeStore")
@inject("userStore")
@inject("pageStore")
@observer
class HomeView extends Component {
  constructor(props) {
    super(props);
    this.state = { currentStateTime: new Date(Date.now()).toString() };
    this.props.pageStore.setPageName("首页")
    setInterval(() => {
      this.setState({
        currentStateTime: new Date(Date.now()).toString()
      })
    }, 1000);
  }


  @action
  handleInputChange = e => {
    this.kim = e.target.value;
  };

  @observable currentMoxbAliasName = "原来的mobx";


  render() {
    const { currentStateTime } = this.state

    return (
      <div style={{ width: 600, border: "solid 1px #ccc", padding: 10 }}>
        <h2>{this.props.pageStore.pageName}</h2>
        <div>城市:{this.props.userStore.cityName.get()}</div>
        <div>
          <hr />
          <p><span>state:</span><span style={{ marginRight: 10 }}>{currentStateTime}</span></p>
          <p> <span>mobx:</span><span>{this.currentMoxbAliasName}</span></p>
        </div>
        <input type="text" onChange={(e) => {
          // this.setState({ currentStateTime: "修改了this.state的数据" + '==>' + e.target.value })
          this.currentMoxbAliasName = "修改后mobx的数据" + '==>' + e.target.value
        }} />
        <hr />

        <h3>首页数据源的number为:{this.props.homeStore.currentNumber}</h3>
        <div>页码计算属性总数量:{this.props.homeStore.total}</div>
        <button onClick={() => { this.props.homeStore.setCurrentNumber(); }} >
          页码+
        </button>
        <button onClick={() => { this.props.homeStore.setCurrentNumber("-"); }} >
          页码-
        </button>
        <button onClick={() => { this.props.history.push("/uesr"); }} >
          跳转到第一个页面
        </button>
      </div>
    );
  }
}
export default HomeView;
